<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script src="pager.js" type="text/javascript"></script>

    <style type="text/css">
        .title {
            font-weight: 800;
            text-align: center;
        }

        #body {
            width: 1024px;
            margin: 0 auto;
        }

        .menu,
        .content {
            float: left;
        }

        .menu {
            line-height: 30px;
            width: 200px;
        }

        .menu-btn {
            border: 1px solid #ccc;
            padding: 5px 10px;
            cursor: pointer;
        }

        .content {
            width: 800px;
            padding-left: 20px;
        }
    </style>
    <script type="text/javascript">
        var pager = null;
        $(function () {
            pager = new Pager({ pageClass: "page", view: ".content" });
        });
        function projectInit(data) {
            $("#projectMsg").html("projectInit 函数成功被执行！传入参数为：" + JSON.stringify(data));
        }

    </script>
</head>

<body>

    <div class="title">
        <h1>Pager说明</h1>
    </div>
    <div id="body">
        <div class="menu">
            <div class="menu-btn" onclick="pager.open('project',{panel:'project',time:new Date()})">项目说明</div>
            <div class="menu-btn" onclick="pager.open('use')">使用说明</div>
            <div class="menu-btn" onclick="pager.open('content')">函数和属性说明</div>
            <div class="menu-btn" onclick="pager.open('demo')">示例</div>
        </div>
        <div class="content">
            <div id="project" class="page" data-show="true" data-init="projectInit">
                <div>
                    <h2>项目说明</h2>
                    <p>
                        一个简单的HTML页面管理插件，可以统一管理页面，控制页面的切换、加载、返回等操作；
                        <br> 很多时候我们一个HTML 项目并不大，没必要用一个臃肿的UI框架来提供一个页面管理切换的功能，这时就可以使用Pager,Pager功能简单、轻量，提供了完整的页面加载、切换和返回功能，使用简单，基本没有学习成本
                    </p>
                </div>
                <div id="projectMsg" style="color:red;"></div>
            </div>
            <div id="use" class="page">
                <div>
                    <h2>使用说明：</h2>

                    <p>将页面内容放入一个元素中，这个元素需要设置 id,class="page",data-init,data-show</p>
                    <p>id：（必需）页面的ID；注意：id为全局唯一标识，如果页面出现相同id的page时仅会保留后出现的那个；</p>
                    <p>class="page"：（必需）表示页面这是一个页面，如果没有该class，页面将不能被pager管理；</p>
                    <p>data-init：（非必需）页面显示时调用的方法，默认与id同名,当需要页面显示时执行该方法，请使用open(id,data)函数来打开一个页面；</p>
                    <p>data-show：（非必需）默认是否显示，一次只能显示一个，如果指定多个，将会显示最后指定的那个；
                    </p>
                </div>
            </div>
            <div id="content" class="page">
                <div>
                    <h2>函数和属性说明：</h2>
                    <p>load(url,data)：加载一个远程页面，返回需要显示的页面的ID；</p>
                    <p>参数：url，ajax请求的数据</p>
                    <p>open(id,data)：打开一个页面；</p>
                    <p>参数：</p>
                    <p>id:页面ID;</p>
                    <p>data:传给页面的数据；</p>
                    <p>注意：参数二非必需，如果选择使用参数二，将会在调用 data-init方法的时候将这个参数传入；</p>
                    <p>如果未指定data-init且也不存在和page的id 同名的函数，传入参数 data将不会有任何作用;</p>
                    <p>back()：返回到上一页面</p>
                    <p>pager会自动使用 data-src 属性内容来加载图片</p>
                </div>
                <div data-ref="#refTest"></div>
            </div>
            <div id="demo" class="page">
                <div>
                    <h2>使用说明：</h2>
                    <p>var pager = new Pager({ pageClass : "page", view : ".content" });
                    </p>
                    <p>pageClass：需要被pager管理的class</p>
                    <p>view:内容页的选择器，默认为body</p>
                    <p>详见本页面源码！！</p>
                </div>
            </div>
            <div id="refTest" class="page">
                <div>
                    <h2>作者：杜胜</h2>
                    <p>欢迎使用该程序！</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>